<template>
  <section>
    <fx-header></fx-header>
    <div class="open-index">
      <!-- 币种基本信息 -->
      <div class="base-wrapper">
        <div class="name">{{ route.query.symbol }}</div>
        <div class="font-700">{{ quoteData?.close }}</div>
      </div>
      <!-- tab 栏 -->
      <div class="tab-wrapper flex-all-center">
        <div :class="{ 'active': activeTab === 1 }" class="flex-all-center flex-1" @click="changeTab(1)">
          {{ t('marketPrice') }} </div>
        <div :class="{ 'active': activeTab === 2 }" class="flex-all-center flex-1" @click="changeTab(2)">
          {{ t('限价') }} </div>
      </div>
      <!-- 开仓价格 -->
      <div class="volumn-wrapper" v-if="activeTab == 2">
        <div class="title">{{ t('price') }} {{ `(${route.query.closePrice})` }}</div>
        <div class="operator">
          <div class="minus btn flex-all-center" @click="handleChangePrice('0.1', '-')">-</div>
          <div class="number  flex-all-center">
            <input style="text-align: center;" class="btn" v-model="inputPrice" type="number" />
          </div>
          <div class="add btn flex-all-center" @click="handleChangePrice('0.1', '+')">+</div>
        </div>
      </div>
      <!-- 开仓数量 -->
      <div class="volumn-wrapper">
        <div class="title">{{ t('可开张数') }}
          <!-- <span v-if="initOpen.volume > 1">{{ `(1 ~ ${initOpen.volume})` }}</span> -->
          <span>{{ `(${initOpen.volume})` }}</span>
        </div>
        <div class="operator">
          <div class="minus btn flex-all-center" @click="handleChangeVolumn(1, '-')">-</div>
          <div class="number  flex-all-center">
            <input style="text-align: center;" @input="changeVolumn" class="btn" v-model="inputVolumn" type="number" />
          </div>
          <div class="add btn flex-all-center" @click="handleChangeVolumn(1, '+')">+</div>
        </div>
        <div class="mainBox">
          <div class="slider" v-if="initOpen.volume > 1">
            <vue-slider @change="onSliderChange" class="mainBox" :marks="marks" v-model="inputVolumnSlider"
              :hide-label="true" width="98%" tooltip="hover" :tooltip-formatter="'{value}%'"
              :railStyle="{ background: '#417EF6', height: '4px' }"
              :processStyle="{ background: '#266BFF', height: '4px' }">
              <template v-slot:step="{ active }">
                <div :class="['custom-step', { active }]"></div>
              </template>
            </vue-slider>
          </div>
        </div>

      </div>
      <!-- 下单信息 -->
      <div class="open-wrapper">
        <div class="open-item mb-10" v-for="(item, index) in infoList" :key="index">
          <span class="label">{{ item.label }}</span>
          <!-- 杠杆下拉框 -->
          <van-dropdown-menu class="value" v-if="item.value == 'lever'">
            <van-dropdown-item v-model="curLevel" :options="levelList" /></van-dropdown-menu>
          <span class="value" v-else>{{ getInfoValue(item.value) }}</span>
        </div>
      </div>
      <!-- 下单按钮 -->
      <div :class="[inputVolumn > 0 ? route.query.type : 'disabled']" class="btn-wrapper flex-all-center"
        @click="handleSubmit">{{ t(route.query.type) }} </div>
      <!-- 下单的弹窗 -->
      <van-popup round v-model:show="showPop" position="bottom" :close-on-click-overlay="false" @close="onClose">
        <div class="pop-box mainBackground">
          <img src="@/assets/image/wallet/close3.png" class="top-46 close-btn" @click="onClose" />
          <div class="title">{{ t('Opening') + t('success') }}</div>
          <div class="content flex-all-center">
            <img class="w-12 h-12 mb-4" src="@/assets/image/choice-blue.png" alt="avatar" />
            <div class="text1">{{ t('Finish') }}</div>
            <div class="text2">{{ route.query.symbol }}</div>
            <div class="text3" :class="route.query.type + '-text'">{{ activeTab === 1 ? t('marketPrice') :
              t('限价')
            }}
              <span>{{ t('volumn') }} {{ inputVolumn }}</span>
            </div>
            <div :class="route.query.type" class="btn-wrapper flex-all-center see-btn" @click="gotoPosition">{{
              t('viewposition')
            }} </div>
          </div>
        </div>
      </van-popup>
    </div>
  </section>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { showToast } from 'vant';
import { _getAllAssets } from "@/service/user.api.js";
import { _initOpen, _orderOpen, _initClose } from "@/service/trade.api.js";
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from 'vue-router';
import VueSlider from "vue-slider-component";

const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const activeTab = ref(1)
const inputVolumn = ref('1') //数量输入
const inputPrice = ref(route.query.closePrice) //价格输入
const showPop = ref(false)
const levelList = ref([])
const curLevel = ref(1) //杠杆初始化为1倍
const initOpen = ref({})
const quoteData = ref({})
const inputVolumnSlider = ref('1')
const marks = (val) => val % 25 === 0

const infoList = [{
  label: t('lever'),
  value: 'lever',
}, {
  label: t('margin'),
  value: 'margin',
}, {
  label: t('money'), //合约金额
  value: 'money',
}, {
  label: t('fee'),
  value: 'fee',
}];

// 下单的参数
const formData = ref({
  symbol: '', // 币种
  session_token: '',
  direction: 'buy', // 买or卖
  price_type: 'opponent', // 市价or限价
  lever_rate: 1, // 杠杆
  price: '',
  amount: '', // 数量
})

// TODO 路由参数不刷新
watch(route, (newval, oldval) => {
  console.log('开仓页面watch', route.query.closePrice)
}, { deep: true })

onMounted(async () => {
  await initParams()
  innitLever(initOpen.value)
})

const initParams = async () => {
  const { symbol, type } = route.query
  const res = await _initOpen({ symbol })
  initOpen.value = res;
}

const innitLever = (res) => {
  if (res.lever && res.lever.length) {
    levelList.value = res.lever?.map(it => {
      return {
        text: `${it.lever_rate}x`,
        value: it.lever_rate
      }
    });
    curLevel.value = levelList.value[0].value //默认选中第一个
  } else {
    levelList.value = [{
      text: "1x",
      value: 1
    }]
  }
}


const onSliderChange = (value) => {
  let data;
  if (initOpen.value.volume) {
    if (value == 0) {
      inputVolumn.value = 1;
    } else {
      const rate = value / 100; //如0.25
      data = initOpen.value.volume * rate;
      inputVolumn.value = parseInt(data);
    }
  }
};

const handleSubmit = async () => {
  if (inputVolumn.value === 0) {
    return
  }
  // 下单之前，刷新token
  await initParams()
  const { symbol, type } = route.query;
  formData.value.symbol = symbol;
  formData.value.direction = type;
  formData.value.lever_rate = curLevel.value;
  formData.value.price_type = activeTab.value === 2 ? 'limit' : 'opponent'; //
  const closePrice = route.query.closePrice;
  formData.value.price = activeTab.value === 2 ? inputPrice.value : closePrice;
  formData.value.session_token = initOpen.value.session_token;
  formData.value.amount = inputVolumn.value;  //不用乘以一手的数量，服务端乘了
  _orderOpen(formData.value).then(res => {
    showPop.value = true
  }).catch(error => {
    // TODO:
    // router.go(-1)
    showToast(t(error))
  })
}

const getInfoValue = (val) => {
  switch (val) {
    case 'fee':
      return inputVolumn.value * initOpen.value.fee;
      break;
    case 'lever':
      return `${curLevel.value}x`;
      break;
    default:
      // 合约和保证金
      return inputVolumn.value * initOpen.value.amount * curLevel.value;
  }
}

const changeTab = (type) => {
  inputVolumnSlider.value = 1
  inputVolumn.value = 1
  activeTab.value = type
}

const handleChangePrice = (step, type) => {
  if (type === '-') {
    if (Number(inputPrice.value) > 0) {
      inputPrice.value = (Number(inputPrice.value) - Number(step)).toFixed(4)
    } else {
      inputPrice.value = 0
    }
  } else {
    inputPrice.value = (Number(inputPrice.value) + Number(step)).toFixed(4)
  }
}

const handleChangeVolumn = (step, type) => {
  if (type === '-') {
    if (Number(inputVolumn.value) > 0) {
      inputVolumn.value = Number(inputVolumn.value) - Number(step)
    } else {
      inputVolumn.value = 0
    }
  } else {
    inputVolumn.value = Number(inputVolumn.value) + Number(step)
  }
}
//滑块处理
const changeVolumn = () => {
  inputVolumnSlider.value = ((inputVolumn.value / initOpen.value.volume) * 100).toFixed(2)
}
const onClose = () => {
  showPop.value = false
}

const gotoPosition = () => {
  router.push('/position/index')
}
</script>

<style lang="scss" scoped>
:deep(.van-dropdown-menu__bar) {
  height: 30px !important;
  width: 90px;
  background: $selectSymbol_background;
  border: 1px solid $border_color;
}

:deep(.van-dropdown-menu__title) {
  color: $text_color;
}

:deep(.van-cell.van-dropdown-item__option) {
  background: $selectSymbol_background;
  color: $text_color;
}

:deep(.van-dropdown-item__option--active) {
  color: $color_main !important;
}

:deep(.van-cell:after) {
  border-bottom: none;
}

// :deep(.van-dropdown-item){
//   left: 70%;
// }
// :deep(.van-dropdown-item--down){
//   width: 90px;
//   margin-top: 10px;
//   background: #fff;
// }
// // z-index高就可以了
// :deep(.van-dropdown-item__content){
//   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
//   border-radius: 6px;

// }

.open-index {
  padding: 0 20px;

  .base-wrapper {
    display: flex;
    justify-content: space-between;
    margin: 24px 0;
    font-size: 20px;
    font-weight: 600;

  }

  .tab-wrapper {
    width: 100%;
    height: 50px;
    background: #1B2134;
    border-radius: 22px;
    font-weight: 700;
    font-size: 16px;

    .active {
      width: 186px;
      height: 45px;
      background: $blue;
      border-radius: 22px;
      color: $text_color;
    }
  }

  .volumn-wrapper {
    margin-top: 24px;

    .title {
      font-weight: 600;
      font-size: 16px;
      color: #818181;
    }

    .operator {
      display: flex;
      margin-top: 28px;

      .btn {
        height: 48px;
        background: $selectSymbol_background;
        border-radius: 8px;
        color: $blue;
        font-size: 24px;
      }

      input.btn {
        color: $text_color !important;
      }

      .minus,
      .add {
        width: 48px;
      }

      .number {
        width: 260px;
      }

      .minus,
      .number {
        margin-right: 8px;
      }
    }

    .slider {
      margin-top: 40px;
    }

    .gears {
      margin-top: 10px;
      font-size: 12px;
    }

  }

  .open-wrapper {
    margin-top: 24px;

    .open-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;

      .label {
        font-weight: 600;
        font-size: 16px;
        color: $text_color;
      }

      .value {
        font-weight: 600;
        font-size: 18px;
        color: $text_color;
      }
    }
  }

  .btn-wrapper {
    width: 100%;
    height: 50px;
    border-radius: 12px;
    margin-top: 24px;
    font-weight: 600;
    font-size: 22px;
    color: $text_color;
  }

  .sell {
    background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);

  }

  .disabled {
    background: #E5E5E5;
  }

  .buy {
    background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);
  }

  .flex-all-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mainBackground {
    padding: 20px;

    .close-btn {
      background-color: #1B2134;
      width: 30px;
      height: 30px;
      border-radius: 4px;
    }

    .title {
      font-weight: 600;
      font-size: 25px;
      line-height: 30px;
      color: $text_color;
      margin: 20px 0;
    }

    .content {
      flex-direction: column;

      .text1 {
        font-size: 15px;
        line-height: 26px;
        color: #fff;
      }

      .text2 {
        font-weight: 800;
        font-size: 22px;
        line-height: 27px;
        color: $text_color;
        margin: 12px 0;
      }

      .text3 {
        font-size: 15px;
        color: #98B9FA !important;
      }

      .sell-text {
        color: $red;
      }

      .buy-text {
        color: $light-blue;
      }
    }
  }
}

.mainBox {
  :deep(.vue-slider-dot-tooltip-inner) {
    background-color: $US_tabActice_background !important;
    color: #118DEC !important;
    padding: 0 10px !important;
  }

  :deep(.vue-slider-dot) {
    background: #417EF6 !important;
    color: #fafafa !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50%;
  }


  :deep(.vue-slider-dot-tooltip-inner-top::after) {
    display: none;
  }

  :deep(.vue-slider-marks) {
    background: #232C46;
  }

  :deep(.custom-step) {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    /* 没有选中时候圈圈的颜色 */
    background: #232C46;
    border: 1px solid #232C46;
    margin-top: -6px;
    position: relative;
    left: -6px;
  }
}

.custom-step.active {
  // box-shadow: 0 0 0 3px $color_main;
  background-color: #417EF6;
  border: 1px solid #417EF6;
}
</style>